<template>
  <teleport to="body">
    <transition name="fade">
      <div
        ref="outer"
        v-if="visible"
        @click="cancel"
        :class="[direction]"
        class="my-dialog-container"
        @touchmove="touchmove"
      >
        <div @click.stop class="my-dialog-inner">
          <slot></slot>
        </div>
        <div></div>
      </div>
    </transition>
  </teleport>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: "center",
    },
  },
  emits: ["cancel", "update:visible"],
  methods: {
    cancel() {
      this.$emit("update:visible", false);
      this.$emit("cancel", false);
    },
    touchmove(e) {
      if (e.target === this.$refs.outer) {
        e.preventDefault();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.my-dialog-container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  .my-dialog-inner {
    position: relative;
  }
  &.center {
    align-items: center;
    .my-dialog-inner {
      animation: fadeZoomIn 0.38s cubic-bezier(0.8, 0, 0, 1.3);
    }
  }
  &.top {
    align-items: flex-start;
    .my-dialog-inner {
      animation: slideInDown 0.3s linear;
    }
  }
  &.bottom {
    align-items: flex-end;
    .my-dialog-inner {
      animation: slideInUp 0.3s linear;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
@keyframes fadeZoomIn {
  from {
    opacity: 0;
    transform: scale(0.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
